<template>
	<view class="page">
		<view class="flex flex-col gap-4">
			<view class="store_item" v-for="item in content" :key="item.id"  >
				<view class="store_item_name" >商户编号：
					<view class="store_item_value">{{item.code}}</view>
				</view>
				<view class="store_item_name">名称：
					<view class="store_item_value">{{item.name}}</view>
				</view>
				<view class="store_item_name"> 运营商：
					<view class="store_item_value">{{item.cuOperatorName}}</view>
				</view>
				<view class="store_item_name">店铺数量：
					<view class="store_item_value">{{item.storeQty}}</view>
				</view>
				<view class="store_item_name">设备数量：
					<view class="store_item_value">{{item.deviceQty}}</view>
				</view>
				<view style="margin-top: 20rpx;display: flex;justify-content: flex-end;gap: 10rpx;border-top: 1px solid #eee; padding-top: 20rpx;">
					<!-- <wd-button size="small" @click="view(item)">查看设备</wd-button> -->
					<wd-button size="small" @click="call(item)" type="success">联系</wd-button>
				</view>
			</view>
		</view>

		<wd-pagination v-model="pagination.page" :total="pagination.total" @change="handleChange" />
		<view class="empty" v-if="content.length == 0">
			<wd-status-tip image="content" tip="暂无商户记录" />
		</view>

		<wd-message-box />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getShopList,
		deleteDaily
	} from "@/api/form.js"
	import { useMessage } from '@/uni_modules/wot-design-uni'


	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const message = useMessage()
	const content = ref([])
	const collapse = ref([])
	const pagination = reactive({
		page: 1,
		pageSize: 10,
		total: 0
	})



	const fetchData = () => {
		getShopList({
			hasQuery: true,
			column: "id",
			order: "asc",
			pageNo: pagination.page || 1,
			size: pagination.pageSize
		}).then(res => {
			uni.stopPullDownRefresh()
			collapse.value =[ `${res.records[0].id}` || ""]
			pagination.total = res.total
			content.value = res.records || []
		})
	}

	onShow(() => {
		fetchData()
	})


	onPullDownRefresh(() => {
		pagination.page = 1
		fetchData()
	})

	const call = (e) =>{
		if  (!e.linkPhone) return
		uni.makePhoneCall({
			phoneNumber:e.linkPhone
		})
	}



	const handleChange = (e) => {
		pagination.page = e.value
		fetchData()
	}

	const addFun = () => {
		uni.navigateTo({
			url : "/pages/form/daily_edit"
		})
	}

	const edit = (e) =>{
		uni.navigateTo({
			url : `/pages/form/daily_edit?id=${e.id}`
		})
	}

	const remove = (e) =>{
		message
		  .confirm({
		    msg: '确定删除吗？',
		    title: '删除'
		  })
		  .then(() => {
				deleteDaily(e.id).then(res =>{
					if(res){
						uni.showToast({
							icon : "none",
							title: "删除成功"
						})
						fetchData()
					}
				})
		  })
	}
</script>


<style lang="scss" scoped>
	.relative {
		position: relative;
	}

	.h-full {
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.btn {
		margin-top: 20rpx;
		width: 180rpx;
		margin-left: 80%;
	}

  .empty {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }


	.add_btn {
		position: fixed;
		bottom: 120rpx;
		right: 40rpx;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 12px 0 rgba(#1b1b1b, .2);
		color: #fff;
		background-color: #3775E9;
	}

	.store_item{
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		color :#666;
		&_name{
			font-size: 14px;
			display: flex;
			align-items: center;
		}
		&_value{
			color: #333;
		}
	}
</style>
